<!-- 采用html5  -->
<!DOCTYPE html>

<HTML>

<head>



</head>
<meta charset="UTF-8">

<!-- 页面显示适应移动设备 -->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" >

<title>APP2</title>


<style>
  /*元素选择器*/

        html{
            height:100%;
        }
        body{

            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }
        .my-container{
            width:100%;
            height:100%;
            background-color: #c9e2d1;
 
        } 
        .my-title{

            font-size:40px;
            text-align: center;/*水平居中*/
            color:rgb(77, 99, 221);
            padding-top:20%;
            font-weight:bold;/*文字加粗*/

            text-shadow:2px 15px 10px #b1aae7; 
            padding-bottom: 20px;
        }
        .my-choice1{
            position: relative;/*给子元素一个定位基点*/
        }
        
        .my-choice1 label{
            position:absolute;
            left:0px;
            top:0px;
            line-height: 40px;/*设置行高，使之垂直居中*/
            font-size:20px;
            padding-left:3px;
            color: #FFFFFF;
        }
        .tiao-kuang{
            width:100%;
            height:40px;
            background-color: rgb(143, 194, 145)
        }
        
        .my-input textarea{
            box-sizing: border-box;
            width:100%;
            height:100px;
            border:none;/*无边框*/
            outline:none;/*无外轮廓*/
            margin-top:5px;
            font-size:20px;
        }
        .my-btn{
    
            width:20%;
            height:40px;
            background-color:rgb(163, 241, 241);
            border:none;
            outline:none;
            color:white;
            font-size:20px;
            border-radius:5px;/*圆角半径*/
            text-align: center;

            margin-top:10px;
        }
        .my-btn:active{
         background-color:#FF0000;
        }
        .buttom{
            text-align: center;
        }
        .my-footer{
            text-align: center;
            color:#AAAAAA;

            margin-top:80px;
        }
        
</style>



<body>
<div class="my-container">

<div class="my-title">实验测试

</div>

<div class="my-choice1">
 <label>评价</label>

</div>
<div class="tiao-kuang">
</div>
<div class="my-input">
    <textarea  >
    </textarea>
</div>

<div class="buttom">
    <button class="my-btn">提交</button>
</div>

<div class="my-footer">版权所有 &copy;XXX软件</div>


</div>

</body>


</HTML>